<template>
  <div class="register-page-container">
    <div class="user-register-wrapper">
      <div class="user-register">
        <h2>注册</h2>
        <form @submit.prevent="handleRegister">
          <div class="input-group">
            <input v-model="username" type="text" placeholder="用户名" required>
          </div>
          <div class="input-group">
            <input v-model="password" type="password" placeholder="密码" required>
          </div>
          <div class="input-group">
            <input v-model="confirmPassword" type="password" placeholder="确认密码" required>
          </div>
          <button type="submit">注册</button>
        </form>
        <p v-if="errorMessage" style="color: red;">{{ errorMessage }}</p>
        <!-- 添加登录按钮 -->
        <nav class="nav button-group">
          <router-link to="/login">->登录</router-link>
        </nav>
      </div>
    </div>
    <!-- 添加欢迎文本 -->
    <br>
    <p>欢迎来到我的个人博客网站，本网站由“笑不合了”授权</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const username = ref('');
const password = ref('');
const confirmPassword = ref('');
const errorMessage = ref('');
const router = useRouter();

const handleRegister = () => {
  if (password.value !== confirmPassword.value) {
    errorMessage.value = '两次输入的密码不一致，请重新输入。';
    return;
  }
  // 这里可以添加实际的注册逻辑
  router.push('/login');
};
</script>

<style scoped>
.register-page-container {
  min-height: 100vh; 
  width: 100vw; 
  padding: 0; 
  margin: 0; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
  overflow: hidden; 
  /* 添加背景图片 */
  background-image: url('@/assets/bg.png'); 
  background-size: cover; 
  background-position: center; 
  background-repeat: no-repeat;
}

.user-register-wrapper {
  display: block; 
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  width: 33.33%; 
  max-width: 500px; 
  box-sizing: border-box; 
}

.input-group {
  margin-bottom: 15px;
}

.input-group input {
  width: 100%; 
  padding: 8px;
  box-sizing: border-box;
}

.user-register h2 {
  text-align: left;
}

.button-group {
  display: flex;
  gap: 10px; /* 按钮之间的间距 */
  justify-content: flex-end; /* 按钮靠右对齐 */
}

/* 修改注册按钮样式，放大 0.25 倍 */
.user-register form button[type="submit"] {
  font-size: 1.25em; /* 字体大小在原有基础上增加 25% */
  padding: 10px 20px; /* 假设原内边距为 8px 16px，增加 25% */
}
</style>